<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制台</title>
		<link rel="stylesheet" type="text/css" href="hCss/identify.css" />
		<link rel="stylesheet" type="text/css" href="hCss/layout.css" />
		<link rel="stylesheet" type="text/css" href="hCss/account.css" />
		<link rel="stylesheet" type="text/css" href="hCss/style.css" />
		<link rel="stylesheet" type="text/css" href="hCss/control_index.css" />
	</head>
    <style>
        * {
    padding: 0;
    margin: 0; }
  
  .container {
    margin: 50px 0 0 200px; }
    .container h2 {
      margin-bottom: 20px; }
    .container .list {
      list-style: none;
      display: flex;
      flex-wrap: wrap; }
      .container .list li {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 0 20px 20px 0; }
        .container .list li img {
          width: 100%;
          height: 100%; }
        .container .list li .close {
          display: none;
          cursor: pointer;
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 50px;
          font-weight: 100;
          color: #dedede;
          transform: translate(-50%, -56%); }
          .container .list li .close:hover {
            color: #fff; }
        .container .list li.file {
          width: 150px;
          height: 150px;
          border: 1px dashed #ccc; }
          .container .list li.file input {
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer; }
          .container .list li.file::before {
            position: absolute;
            top: 50%;
            left: 50%;
            content: "+";
            font-size: 50px;
            font-weight: 100;
            color: #dedede;
            transform: translate(-50%, -56%); }
          .container .list li.file:hover {
            border-color: #5192fe; }
        .container .list li:not(:last-child)::before {
          display: none;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.4); }
        .container .list li:not(:last-child):hover::before {
          display: block; }
        .container .list li:not(:last-child):hover .close {
          display: block; }
          .w-text{
              height: 60px;
              font-size: 24px;
              line-height: 36px;
          }
          .w-tijiao{
              height: 48px;
              width: 112px;
              background-color: #6ba0f5;
              text-align: center;
              line-height: 48px;
              color: white;
              font-size: 24px;
          }
          .w-tijiao a{
              color: white;
          }
          a:hover {
              color: rgb(92, 222, 226);
          }
    </style>
	<body>
	<div class="view-topbar">
		<div class="topbar-console">
			<div class="tobar-head fl">
				<a href="#" class="topbar-logo fl">
					<span><img src="Images/logo.png" width="20" height="20"/></span>
				</a>
				<a href="hindex" class="topbar-home-link topbar-btn text-center fl"><span>管理控制台</span></a>
			</div>
		</div>
		<div class="topbar-info">
			<ul class="fr">
				<li class="fl dropdown topbar-notice topbar-btn">
					<a href="hindex" class="dropdown-toggle">
						<span class="icon-notice"></span>
						<span class="topbar-num have">0</span>
					</a>
				</li>
				<li class="fl topbar-info-item">
					<div class="dropdown">
						<a href="hindex" class="topbar-btn">
							<span class="fl text-normal">帮助与文档</span>
							<span class="icon-arrow-down"></span>
						</a>
						<ul class="dropdown-menu">
							<li><a href="hindex">模板开发手册</a></li>
							<li><a href="hindex">某某数据字典</a></li>
						</ul>
					</div>
				</li>
				<li class="fl topbar-info-item">
					<div class="dropdown">
						<a href="hindex" class="topbar-btn">
							<span class="fl text-normal" th:text="${#session.getAttribute('admin').adminName}">小朱</span>
							<span class="icon-arrow-down"></span>
						</a>
						<ul class="dropdown-menu">
							<li><a href="hlogin">退出</a></li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
	</div>
		<div class="view-body">
			<div class="view-sidebar">
				<div class="sidebar-content">
					<div class="sidebar-nav">
						</ul>
					</div>
					<div class="sidebar-nav">
						<div class="sidebar-title">
							<a href="hindex">
								<span class="icon"><b class="fl icon-arrow-down"></b></span>
								<span class="text-normal">用户中心</span>
							</a>
						</div>
						<ul class="sidebar-trans">
							<li>
								<a href="huserInfo">
									<b class="sidebar-icon"><img src="Images/icon_cost.png" width="16" height="16" /></b>
									<span class="text-normal">商品管理</span>
								</a>
							</li>

							<li>
								<a href="horder">
									<b class="sidebar-icon"><img src="Images/icon_order.png" width="16" height="16" /></b>
									<span class="text-normal">订单管理</span>
								</a>
							</li>
							<a href="hsmsInfo">
								<b class="sidebar-icon"><img src="Images/icon_news.png" width="16" height="16" /></b>
								<span class="text-normal">评价管理</span>
							</a>

						</ul>
					</div>
				</div>
			</div>
			<div class="view-product">
				<div class="info-center">
		            <div class="manage-head">
		                <h6 class="padding-left manage-head-con">添加商品管理</h6>
		            </div>
                    <div class="container">
                        <h2>上传图片</h2>
                        <ul class="list">
                            <li class="file">
                                <!-- multiple这个属性可以实现文件选择框的多选 -->
                                <input type="file" name="file" id="file" multiple />
                            </li>
                        </ul>
                        <div class="w-text"><span >商品名 : </span><input type="text" id="name" value="" placeholder="请输入商品名"></div>
                        <div class="w-text"><span >价  格 : </span><input type="text" id="price" placeholder="请输入价格"></div>
                        <div class="w-text"><span >库  存 : </span><input type="text" id="stock" placeholder="请输入库存"></div>
                        <div class="w-text"><span >尺  码 : </span><input type="text"  id="size" placeholder="请输入尺码"></div>
                        <div class="w-tijiao"><a id="w-tj">提交</a></div>
                    </div> 
			</div>
		</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquer.js"></script>
        <script>
            // 页面加载事件 等页面渲染完毕在执行js
    window.addEventListener("load", () => {
        // 先获取一下上传的这个图标元素
        let uploadFile = document.querySelector("#file");
        // 在获取一下整个list和file这个框框
        let list = document.querySelector(".list");
        let file = document.querySelector(".file");
        // 为这个按钮添加change事件 当你选中图片然后点击确定时触发
        uploadFile.addEventListener("change", function () {
            // this.files 是获取到的数据 是一个类数组对象 所有我们只能用普通for循环 或者for of 自行选择即可
            for (let item of this.files) {
                // 动态生成一个dom节点li;
                let li = document.createElement("li");
                // 然后给li添加内容
                // 上传上去的文件名称保存在每一项的name中
                // 对了这个我用了模板字符串 也可以用普通的字符串用+号拼接 自行选择
                li.innerHTML = `
          <div class="close">×</div>
          <img src="assets/img/addimg/${item.name}" id='img'/>
          `;
                // 每次生成一个li节点就添加到file这个元素之前
                // insertBefore是将一个元素添加到谁的前面
                // 第一个参数是新元素 第二个参数是已有元素
                list.insertBefore(li, file);
            }
        });
        // ok  现在做删除功能 因为每次添加新的li元素都会重绘dom树 没法给每个.close元素绑定事件 这里我们就用事件委托实现
        list.addEventListener("click", (e) => {
            // e是页面一开启就自动生成的事件对象
            // e.target是触发事件的对象 ndoeName是每一个dom元素都有节点 且值全部都是大写
            // 这里就是如果点击的是×号就删除 否则不删除
            if (e.target.nodeName == "DIV") {
                // removeChild是移除子元素 括号写的是点击的div对应的父元素就是某一个li了
                list.removeChild(e.target.parentNode);
            }
        });
        $("#w-tj").click(function(){
            var img=$("#img").attr("src");
            var name=$("#name").val();
			var price=$("#price").val();
			var stock=$("#stock").val();
			var size=$("#size").val();
			location.href="addGoods?name="+name+"&price="+price+"&img="+img+"&stock="+stock+"&size="+size
        })
    });
        </script>
</html>